<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>课程详情 - 桂北程序员 | IT培训</title>

        <link rel="stylesheet" href="/css/component/nav.css">
        <link rel="stylesheet" href="/css/course-detail.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    </head>
    <body>
        <div class="root">
            <div class="main-content container">
                <div class="header mt-4 row">
                    <img class="d-none d-md-block col-md-4" id="c-d-img"  alt="" srcset="">
                    <div class="col-12 col-md-8">
                        <h2 id="c-d-title"></h2>
                        <p id="course-profile"></p>
                        <div style="font-size: 13px;" class="d-flex">
                            <p class="text-muted">课程时长：<span id="c-d-time">128分钟</span></p>
                            <p class="text-muted ml-4">当前共有<span id="c-d-amount">9999</span>人参与学习</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <div style="width: 300px;">
                                <span class="text-dark">当前进度</span>
                                <div class="progress my-2">
                                    <div class="progress-bar" style="width: 30%;">38/128</div>
                                </div>
                            </div>
                            <div class="ml-5">
                                <button class="btn btn-primary">立即参与</button>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <hr>
                <div class="body">
                    <ul class="nav nav-tabs nav-pills">
                        <li class="nav-item mx-1">
                            <a href="#" class="nav-link active" data-toggle="tab" data-target="#c-d-profile">简介</a>
                        </li>
                        <li class="nav-item mx-1">
                            <a href="#" class="nav-link" data-toggle="tab" data-target="#c-d-list">目录</a>
                        </li>
                        <li class="nav-item mx-1">
                            <a href="#" class="nav-link" data-toggle="tab" data-target="#c-d-comment">讨论区</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="c-d-profile" class="tab-pane fade show active">
                            <div class="row">
                                <div class="col-md-8">
                                    <h5 class="my-3">课程概述</h5>
                                    <div id="c-d-detail" style="font-size: 14px;" class="text-muted">
                                        
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card w-100">
                                        <div class="card-body c-comment">
                                            <h5 class="card-title">评价</h5>
                                            <hr>
                                            <div class="media mb-2">
                                                <img src="/statics/upload/user/default-user.png" alt="" srcset="" class="mr-3"></img>
                                                <div class="media-body">
                                                    <p class="card-text mb-1" style="font-size: 14px;">用户名</p>
                                                    <p class="card-text mb-1 text-muted" style="font-size: 12px;">学习2个课时后评价 - 12月22日</p>
                                                    <p class="card-text mb-1">太好了</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <img src="/statics/upload/user/default-user.png" alt="" srcset="" class="mr-3"></img>
                                                <div class="media-body">
                                                    <p class="card-text mb-1" style="font-size: 14px;">用户名</p>
                                                    <p class="card-text mb-1 text-muted" style="font-size: 12px;">学习2个课时后评价 - 12月22日</p>
                                                    <p class="card-text mb-1">太好了</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div id="c-d-list" class="tab-pane fade ">
                            <p id="c-d-list-none" class="text-center text-secondary d-none">暂无任何章节..</p>
                        </div>
                        <div id="c-d-comment" class="tab-pane fade"></div>
                    </div>
                </div>
            </div>
        </div>
        
    </body>

    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.bundle.min.js"></script>
    <script type="module" src="/js/main-nav.js"></script>

    <script type="module" src="/js/course-detail.js"></script>


</html>